<template>
  <div class="wrapper">

    <div class="title">
      <p class="amount">¥<span>{{amount}}</span></p>
      <p class="num">订单编号<span>{{num}}</span></p>
      <p class="residual-time"><span>剩余</span><van-count-down :time="time" format="mm:ss"/></p>
    </div>

    <div class="pay-method">
      <van-radio-group v-model="payWay">

      <van-cell-group>
        <van-cell title="请选择支付方式"/>

        <van-cell  >
          <template #title>
            <img src="./../../assets/img/wechat.png" alt="">
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-radio name="wx"/>
          </template>
        </van-cell>

        <van-cell  >
          <template #title>
            <img src="./../../assets/img/alipay.png" alt="">
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-radio name="zfb"/>
          </template>
        </van-cell>
      </van-cell-group>

      </van-radio-group>

    </div>

    <van-button type="warning" block @click="handlePay">确认支付</van-button>

  </div>


</template>

<script setup lang="ts">

import {ref,reactive} from "vue"
import {useRoute} from "vue-router"
import {pay} from "@/api/pay"

const route = useRoute();

let time = ref(1800000);


let payWay = ref(null);

let num = route.query.num;
let amount = route.query.amount;


if(!num || !amount){
  showNotify({ type: 'danger', message: '支付参数错误' });
}

const handlePay = ()=>{
  //判断是否有选择支付方式
  if(!payWay.value){
    showNotify({ type: 'danger', message: '请选择支付方式' });
    return;
  }

  if(num && amount){
    pay(num,payWay.value).then((resp)=>{
      if(resp.code == 200){
        window.document.write(resp.data);
      }else{
        showNotify({ type: 'danger', message: resp.msg });
      }
    });
  }else{
    showNotify({ type: 'danger', message: '支付参数错误' });
  }
}

</script>

<style scoped>


.wrapper {
  padding: 10px;
}


.wrapper .title{
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
}

.wrapper .title .num{
  margin: 4px 0;
}

.wrapper .residual-time{
  display: flex;

  justify-content: center;

  align-items: baseline;
  line-height: 12px;
  font-size: 12px;

}

.wrapper .title .amount{
  padding-top: 10px;
  font-size: 20px;
  font-weight: bolder;
}

.pay-method {
  margin-top: 10px;
  margin-bottom: 10px;
}



</style>